<template>
    <div class="order-content">
        <div class="title">
            <h3>我的订单</h3>
        </div>
        <div class="chosetype">
            <table>
                <thead>
                <tr>
                    <th width="29%">商品</th>
                    <th width="31%">订单详情</th>
                    <th width="13%">收货人</th>
                    <th>金额</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
                </thead>
            </table>
        </div>
        <div class="orders">
            <!--订单信息-->
            <table class="order-item" v-for="order in orders" :key="order.id">
                <thead>
                    <tr>
                    <th colspan="5">
                      <span class="ordertitle">{{order.createTime}} ❤订单编号：{{order.outTradeNo}} <span
                              class="pull-right delete"><img src="./images/delete.png"></span></span>
                    </th>
                </tr>
                </thead>
                <tbody>
                    <tr v-for="(good,index) in order.orderDetailList" :key="good.id">
                        <td width="60%">
                            <div class="typographic">
                                <img :src="good.imgUrl" width="70">
                                <a href="javascript:;" class="block-text">
                                    {{good.skuName}}
                                </a>
                                <span>x{{good.skuNum}}</span>
                                <a href="javascript:;" class="service">售后申请</a>
                            </div>
                        </td>
                        <td v-show="index===0" :rowspan="order.orderDetailList.length" width="8%" class="center">{{order.consignee}}</td>
                        <td v-show="index===0" :rowspan="order.orderDetailList.length" width="13%" class="center">
                            <ul class="unstyled">
                                <li>总金额¥{{order.totalAmount}}</li>
                                <li>在线支付</li>
                            </ul>
                        </td>
                        <td v-show="index===0" :rowspan="order.orderDetailList.length" width="8%" class="center">
                            <a href="#" class="btn">已完成 </a>
                        </td>
                        <td v-show="index===0" :rowspan="order.orderDetailList.length" width="13%" class="center">
                            <ul class="unstyled">
                                <li>
                                    <a href="mycomment.html" target="_blank">评价|晒单</a>
                                </li>

                            </ul>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class="choose-order">
            <!--分页组件
                Attributes
                    background:	    是否为分页按钮添加背景色
                    current-page:	当前页数
                    page-sizes:     每页显示个数选择器的选项设置
                    page-size:      每页显示条目个数
                    total:      	总条目数
                    layout:         组件布局，子组件名用逗号分隔

                事件
                    size-change :	pageSize改变时会触发(回调参数:每页条数)
                    current-change	currentPage改变时会触发(回调参数:当前页)
            -->
            <el-pagination
                    style="text-align: center"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :background="true"
                    :current-page="page"
                    :page-sizes="[1,3, 5, 7, 9]"
                    :page-size="limit"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import {mapActions,mapState} from "vuex"
    export default {
        name: "myOrder",
        data(){
          return{
              page:1,
              limit:3,
              total:0
          }
        },
        computed:{
          ...mapState({
              orders:state=>state.center.orders
          })
        },
        methods:{
            ...mapActions(["getOrders"]),
            //请求订单列表
            async list(){
                const {page,limit} = this;
                const {code,total} = await this.getOrders({page,limit});
                if(code===200){
                    this.total=total
                }
            },
            //pageSize改变时会触发(回调参数:每页条数)
            async handleSizeChange(pageSize) {
                this.limit = pageSize;
                await this.list()
            },
            //currentPage改变时会触发(回调参数:当前页)
            async handleCurrentChange(currentPage) {
                this.page = currentPage;
                await this.list()
            }
        },
        async mounted() {
            await this.list()
        }
    }
</script>

<style scoped lang="less">
    //订单部分
    .order-content {
        margin: 0 20px;
        color: #666;

        //标题
        .title {
            margin-bottom: 22px;
            border: 1px solid #ddd;

            h3 {
                padding: 12px 10px;
                font-size: 15px;
                background-color: #f1f1f1;

            }
        }

        //表头
        .chosetype {
            margin-bottom: 15px;
            color: #666;

            table {
                border: 1px solid #e6e6e6;
                border-collapse: separate;
                border-radius: 2px;
                width: 100%;
                max-width: 100%;
                border-spacing: 0;

                th {
                    padding: 6px 8px;
                    color: #666;
                    font-weight: 700;
                    vertical-align: bottom;
                    background-color: #f4f4f4;
                    line-height: 18px;
                    border-bottom: 1px solid #e6e6e6;
                    font-size: 12px;
                    text-align: left;
                }
            }
        }

        // 表单内容
        .orders {
            font-size: 12px;

            a {
                &:hover {
                    color: #4cb9fc;
                }
            }

            table {
                border: 1px solid #e6e6e6;
                border-collapse: collapse;
                border-radius: 2px;
                width: 100%;
                margin-bottom: 18px;
                max-width: 100%;

                th {
                    padding: 6px 8px;
                    line-height: 18px;
                    text-align: left;
                    vertical-align: bottom;
                    background-color: #f4f4f4;
                    font-size: 12px;
                    color: #666;

                    .pull-right {
                        float: right;
                        cursor: pointer;

                        img {
                            margin-right: 10px;
                            vertical-align: middle;
                        }
                    }
                }

                td {
                    font-size: 12px;
                    color: #666;
                    padding: 6px 8px;
                    line-height: 18px;
                    text-align: left;
                    vertical-align: middle;
                    border: 1px solid #e6e6e6;

                    &.center {
                        text-align: center;
                    }

                    .typographic {
                        img {
                            float: left;
                            margin-right: 10px;
                        }

                        a {
                            float: left;
                            min-width: 80px;
                            max-width: 250px;
                            color: #e1251b;

                            &.service {
                                color: #666;
                            }
                        }

                        span {
                            float: left;
                            min-width: 80px;
                            max-width: 250px;
                            text-align: center;
                        }

                    }
                }

            }
        }

        // 分页
        .choose-order {
            .pagination {
                margin: 38px 0;

                ul {
                    font-size: 0;
                    display: inline-block;

                    li {
                        display: inline-block;
                        padding: 4px 9px;
                        font-size: 14px;
                        border: 1px solid #e0e9ee;

                        &.prev,
                        &.next {
                            background-color: #fafafa;
                        }

                        &.prev {
                            border-right-color: #28a3ef;
                        }

                        &.page {
                            border-color: #28a3ef;
                            border-left: 0;

                            &.actived {
                                background-color: #28a3ef;

                                a {
                                    color: #fff;
                                }

                            }
                        }
                    }
                }

                div {
                    display: inline-block;
                    font-size: 14px;
                    color: #333;
                }
            }
        }
    }
</style>
